<template>
    <view>
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :show-empty-view-reload-when-error="false"
            :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
            empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-error-text="暂无数据"
            bg-color="#FFF"
            v-model="dataList"
            @query="queryList"
        >
            <view slot="top">
                <view class="search">
                    <u-search
                        placeholder="搜索"
                        v-model="keyword"
                        bgColor="#E1E1E1"
                        color="#333"
                        placeholderColor="#999999"
                        clearabled
                        height="64rpx"
                        @custom="keywordSearch"
                        :actionStyle="actionStyle"
                    />
                </view>
                <u-tabs
                    :list="navList"
                    @click="click"
                    @change="changeType"
                    :current="current"
                    :scrollable="false"
                    :inactiveStyle="inactiveStyle"
                    :activeStyle="activeStyle"
                    lineColor="#588BF3"
                ></u-tabs>
            </view>

            <view class="item" v-for="(item, index) in dataList" :key="index">
                <view class="item_time flex_wrap row_between">
                    <u-text
                        :text="`创建时间：${$u.timeFormat(item.createTime)}`"
                        bold
                        size="28rpx"
                    />
                    <u-text
                        :text="`总张数：${item.goodsCount}`"
                        bold
                        align="right"
                        size="28rpx"
                        color="#FF8400"
                    />
                </view>
                <view
                    class="item_detail flex_wrap row_between"
                    @click.stop="toDetail(item)"
                >
                    <u-image
                        height="220rpx"
                        width="220rpx"
                        :src="item.goodsSnapshot.thumbnail"
                        mode="aspectFill"
                        radius="10rpx"
                    />
                    <view style="flex: 1; padding-left: 20rpx">
                        <text class="total">{{ item.goodsName }}</text>
                        <view class="detail_tt flex_wrap">
                            <text
                                :style="
                                    item.goodsSnapshot.skuSimpleSpecs
                                        ? 'color: #333'
                                        : 'color: #999'
                                "
                                >{{
                                    item.goodsSnapshot.skuSimpleSpecs ||
                                    "无规格"
                                }}</text
                            >
                        </view>
                        <u-gap height="60rpx" />
                        <view
                            class="flex_wrap row_between"
                            style="color: #588bf3"
                        >
                            待领劵：
                            <u-text
                                :text="item.claimableCount"
                                size="24rpx"
                                color="#588bf3"
                            ></u-text>
                            <u-icon
                                name="arrow-right"
                                color="#588bf3"
                                size="16"
                                @click="toDetail(item)"
                            ></u-icon>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { getNoReceiveListBySalesman } from "@/api/shopSalesman.js";
import {
    numAdd,
    numSub,
    numMulti,
    numDiv,
} from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { formatDecimal } from "@/utils/index.js";
export default {
    data() {
        return {
            showService: false,
            numAdd,
            numSub,
            numMulti,
            numDiv,
            showCancelModal: false,
            formatDecimal: formatDecimal,
            actionStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            keyword: "",
            show: false,
            current: 0,
            inactiveStyle: {
                fontSize: "32rpx",
            },
            activeStyle: {
                fontSize: "32rpx",
                fontWeight: "bold",
                color: "#588BF3",
            },
            status: "",
            navList: [
                {
                    name: "未领取完",
                    status: 2, //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
                {
                    name: "已领取完",
                    status: 3, //查询条件 空字符串为查询全部 1:查待付款 2查待领取 3查已完成 4查退款
                },
            ],
            dataList: [],
            currentOrderNum: "",
        };
    },

    onLoad() {
        this.showType();
    },
    methods: {
        closeService() {
            this.showService = false;
        },
        openService() {
            this.showService = true;
        },
        keywordSearch() {
            this.$refs.paging.reload();
        },
        showType() {
            // 使用 uni.setNavigationBarColor 替换 wx.setNavigationBarColor，支持跨平台
            uni.setNavigationBarColor({
                frontColor: "#000000",
                // backgroundColor: "#ffffff",
            });
        },
        toDetail(item) {
            uni.$u.route({
                url: "/pages_shop1/order/coupon/index",
                params: {
                    orderNum: item.orderNum,
                },
            });
        },
        changeType(e) {
            this.$refs.paging.reload();
        },
        click(e) {
            this.current = e.index;
        },
        async queryList(pageNo, pageSize) {
            const params = {
                pageNum: pageNo,
                pageSize: pageSize,
                info: this.keyword,
                status: this.current ? 3 : 2,
            };
            const result = await getNoReceiveListBySalesman(params);
            const rows = result.data.rows.map((item) => {
                const goodsSnapshot =
                    item.goodsSnapshot && JSON.parse(item.goodsSnapshot);
                const simpleSpecs =
                    (goodsSnapshot.simpleSpecs &&
                        JSON.parse(goodsSnapshot.simpleSpecs)) ||
                    null;
                const skuSpecs =
                    (goodsSnapshot.skuSpecs &&
                        JSON.parse(goodsSnapshot.skuSpecs)) ||
                    null;
                item.goodsSnapshot = goodsSnapshot;
                item.goodsSnapshot.simpleSpecs = simpleSpecs || null;
                item.goodsSnapshot.skuSpecs = skuSpecs || null;
                return item;
            });
            // .filter((v) => v.isReceive);
            this.$refs.paging.completeByTotal(rows, result.data.total);
        },
    },
};
</script>

<style lang="scss" scoped>
.search {
    padding: 32rpx 28rpx;
}

.item {
    margin: 40rpx 28rpx 0;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
}

.item_time {
    height: 80rpx;
    border-bottom: 2rpx solid #f3f3f3;
    padding: 0 24rpx;
}

.item_detail {
    border-bottom: 2rpx solid #f3f3f3;
    padding: 26rpx 10rpx 20rpx;

    image {
        width: 220rpx;
        height: 220rpx;
        border-radius: 8rpx;
    }
}

.total {
    display: block;
    width: 412rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.detail_tt {
    margin-top: 36rpx;
    font-size: 26rpx;
    color: #666666;

    text {
        margin-right: 10rpx;
    }
}

.price {
    height: 72rpx;
    text-align: right;
    font-size: 24rpx;
    color: #ff0000;
    line-height: 72rpx;
    margin-right: 12rpx;

    .price_t {
        font-size: 30rpx;
        font-weight: bold;
    }
}

.payBtn {
    width: 158rpx;
    height: 44rpx;
    line-height: 44rpx;
    font-size: 24rpx;
    margin-right: 0;
    margin-left: 0;
    background: #588bf3;
    color: #ffffff;
    border-radius: 22rpx;
}

.payBtn::after {
    border: none;
}

.cancelOrderBtn {
    width: 158rpx;
    height: 44rpx;
    line-height: 42rpx;
    font-size: 24rpx;
    border: 1px solid #e3e3e3;
    border-radius: 22rpx;
    outline: none;
}

.cancelOrderBtn::after {
    border: none;
}

.customerSerivce {
    width: 32rpx;
    height: 32rpx;
}
</style>
